<template>
  <div class="px-3 bg-white border-rounded-2xl">
    <div class="pt-5 pos-relative" style="min-height: 350px">
      <template v-if="originalList.length == 0">
        <el-empty description="description" />
      </template>
      <!-- 骨架屏 -->
      <template v-if="isLoading">
        <div class="h-25"></div>
        <div class="flex flex-col justify-center">
          <el-icon class="is-loading" size="45" color="#777373" style="margin: 0 auto">
            <Loading />
          </el-icon>
          <span class="text-sm text-gray-500 pt-2.5 block text-center">加载中...</span>
        </div>
        <div class="h-15"></div>
      </template>
      <template v-else>
        <ul class="flex flex-wrap product-list">
          <li v-for="item in productsList" class="mb-5 w-1/6 item" :key="item">
           <ProductCard :item="item" />
          </li>
        </ul>
      </template>

      <div class="pt-3">
        <Pagination
          :total="total"
          :page="page"
          :page-size="pageSize"
          @change="handlePageChange"
        ></Pagination>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, watch,inject, onMounted, onUnmounted } from "vue";
import { Plus, Loading, AlarmClock, Goods } from "@element-plus/icons-vue";
import { throttle } from "@/utils/util";
import { generateProducts } from "@/mock/data/product";
import Pagination from "@/components/common/Pagination.vue";
import ProductCard from "./../../Product/components/ProductCard.vue";

const stickyElement = ref<HTMLDivElement | null>(null);
const isSticky = ref(false);

const isLoading = ref(false);
const isLoadingMore = ref(false);
const hasMore = ref(true);
const currentPage = ref(1);
const page = ref(1);
const pageSize = 36;
const total = ref(200);

// 加载更多数据
const loadMoreData = async () => {
  if (isLoadingMore.value || !hasMore.value) return;

  isLoadingMore.value = true;
  currentPage.value += 1;

  // 模拟API请求延迟
  setTimeout(() => {
    const newProducts = generateProducts(pageSize);
    productsList.value = [...productsList.value, ...newProducts];

    // 模拟数据加载完毕的情况
    if (productsList.value.length >= total.value) {
      hasMore.value = false;
    }

    isLoadingMore.value = false;
  }, 1000);
};
const handleScroll = () => {
  // 获取目标元素的DOM引用
  if (!stickyElement.value) return;

  // 获取元素距离文档顶部的距离
  const elementTop = stickyElement.value.offsetTop;
  // 获取当前滚动条垂直位置（跨浏览器兼容写法）
  const scrollTop =
    window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;

  // 判断是否应该吸顶
  isSticky.value = scrollTop > elementTop;

  // 检查是否滚动到底部
  const scrollHeight =
    document.documentElement.scrollHeight || document.body.scrollHeight;
  const clientHeight = window.innerHeight || document.documentElement.clientHeight;
  // 距离底部100px时触发加载
  if (scrollTop + clientHeight >= scrollHeight - 500) {
    loadMoreData();
  }
};
const handlePageChange = (val: number) => {
  console.log(val);
  isLoading.value = true;
  window.scrollTo(0, 0);
  setTimeout(() => {
    initData();
    isLoading.value = false;
  }, 750);
};
/**
 * 获取商品列表
 */
const originalList = ref<any[]>([]);
const productsList = ref<any[]>([]);
const initData = () => {
  originalList.value = generateProducts(pageSize);
  console.log(originalList.value);
  productsList.value = originalList.value.slice(0, 60);
};
onMounted(() => {
  window.addEventListener("scroll", throttle(handleScroll, 150));
  initData();
});
onUnmounted(() => {
  window.removeEventListener("scroll", handleScroll);
});
</script>
<style lang="scss" scoped>
.is-sticky {
  position: fixed;
  top: 89px;
  width: 100%;
  left: 0;
  z-index: 208;
  /* 可以添加一些吸附后的样式 */
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.product-list {
}

.loading-spinner {
  width: 50px;
  height: 50px;
  border: 5px solid #f3f3f3;
  border-top: 5px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>
